<template>
	<div class="photoinfo-container">
		<h3>{{ photoinfo.title }}</h3>
		<p class="subtitle">
			<span>发表时间：{{ photoinfo.add_time }}</span>
			<span>点击：{{ photoinfo.click }}次</span>
		</p>
		<hr>
		<!-- 缩略图区域 -->
		<div class="thumbs">
			<!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> -->
			<vue-preview :slides="list" @close="handleClose"></vue-preview>
		</div>
		<!-- 图片内容区域 -->
		<div class="content" v-html="photoinfo.content"></div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				id: this.$route.params.id, // 从路由中获取到的片Id
				photoinfo: {}, // 图片详情
				list: [] // 缩略图的数组
			}
		},
		created() {
			this.getPhotoInfo()
			this.handleClose()
		},
		methods: {
			getPhotoInfo() {
				// 获取图片的详情
				this.$http.get('photo/getimageInfo', {
					params: {
						id: this.id
					}
				}).then(result => {
					if (result.data.status === 0) {
						this.photoinfo = result.data.message[0]
					}
				})
			},
			// 图片懒加载
			handleClose() {
				// 获取缩略图
				this.$http.get('photo/getthumimages', {
					params: {
						id: this.id
					}
				}).then(result => {
					if (result.data.status === 0) {
						// 循环每个图片数据，补全图片的宽和高
						result.data.message.forEach(item => {
							item.w = 600
							item.h = 400
							item.msrc = item.src
						});
						// 把完整的数据保存到 list 中
						this.list = result.data.message
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	.photoinfo-container {
		padding: 3px;

		h3 {
			color: #26a2ff;
			font-size: 15px;
			text-align: center;
			margin: 15px 0;
		}

		.subtitle {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}

		.content {
			font-size: 13px;
			line-height: 30px;
		}

		.thumbs {
			.my-gallery {
				width: 100%;
				display: flex;
				flex-flow: row wrap;
			}

			figure {
				margin: 0.2em;
			}

			img {
				width: 5.6em;
				box-shadow: 0 0 8px #999;
			}
		}
	}
</style>